<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <el-descriptions
            class="margin-top"
            title="基本信息"
            :column="3"
            :size="size"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  店铺ID
                </div>
              </template>
              {{ shop.id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  店铺名称
                </div>
              </template>
              {{ shop.shopName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <pear />
                  </el-icon>
                  登录名称
                </div>
              </template>
              {{ shop.loginName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <location />
                  </el-icon>
                  归属商户
                </div>
              </template>
              {{ shop.merName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  状态
                </div>
              </template>
              <dict-tag :options="sys_normal_disable" :value="shop.status" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <office-building />
                  </el-icon>
                  邮箱地址
                </div>
              </template>
              {{ shop.email }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span><strong>财务信息</strong></span>
              <el-table
                :data="accounts"
                ref="tableRef">
                <el-table-column label="账号类型" align="center" prop="accType" width="100" />
                <el-table-column label="账号余额" align="center" prop="balance">
                  <template #default="scope">
                    <span>{{ scope.row.balance/100 }} </span>
                  </template>
                </el-table-column>
                <el-table-column label="冻结金额" align="center" prop="frozeAmount">
                  <template #default="scope">
                    <span>{{ scope.row.frozeAmount/100 }} </span>
                  </template>
                </el-table-column>

                <el-table-column label="状态" align="center" prop="status">
                  <template #default="scope">
                    <span>
                      <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span><strong>收益信息</strong></span>
              <el-table
                :data="ratios"
                ref="tableRef">
                <el-table-column label="支付名称" align="center" prop="paymentWayName" width="100" />
                <el-table-column label="支付编码" align="center" prop="paymentWay" />
                <el-table-column label="收益率" align="center" prop="earningRate">
                  <template #default="scope">
                    <span>{{ scope.row.earningRate }} %</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                  <template #default="scope">
                    <span>
                      <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { getAccountList } from "@/api/merchant/shop";
import { getProfitConfig } from "@/api/merchant/shop";
import { getShop } from "@/api/merchant/shop";

import { ShopVO } from '@/api/retail/shop/types';
import { AccountVO } from '@/api/retail/account/types';
import {Pear} from "@element-plus/icons-vue";
import {ProfitRatioVO} from "@/api/retail/profitRatio/types";

const props = defineProps({
  shopId: {
    type: [Number, String]
  }
})
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
const shop = ref<ShopVO>({
  id: '',
  shopName: '',
  loginName: '',
  merId: '',
  merName: '',
  email: '',
  status: ''
});
const size = ref('')
const ratios = ref<ProfitRatioVO[]>([]);
const accounts = ref<AccountVO[]>([]);
const iconStyle = computed(() => {
  return {
    marginRight: "6px",
  }
})

const getShopInfo = async () => {
  const res = await getShop(props.shopId);
  if(res.code==200 && res.data.id) {
    Object.assign(shop.value, res.data);
    // 加载店铺的配置信息
    await getShopProfitSetting();
    // 加載店鋪的賬號信息
    await getAccounts();
  }
}

const getAccounts = async () => {
  const res = await getAccountList(props.shopId);
  // accounts.value.concat(res.data);
  for(const index in res.data) {
    let account = res.data[index];
    accounts.value.push(account);
  }
}

const getShopProfitSetting = async () => {
  const res = await getProfitConfig(props.shopId);
  // ratios.value.concat(res.data);
  for(const index in res.data) {
    let ratio = res.data[index];
    ratios.value.push(ratio);
  }
}

onMounted(() => {
  getShopInfo();
})
</script>
